<template>
  <div class="node_container">
    <div class="title">
      <img src="../../assets/common/l_title_1.png" alt="">
    </div>
    <div class="node_con">
      <swiper v-if="nodeData.length>0" ref="node_swiper" :options="swiperOption" class="node_swiper_container">
        <swiper-slide v-for="(item,index) in nodeData" :key="index" class="swiper-slide">
          <div class="slide_box">
            <div class="node_img">
              <img :src="item.img" alt="">
            </div>
            <div class="node_name">
              <h5>{{ item.name }}</h5>
              <div class="num">{{ item.num }}</div>
              <div class="decorate">
                <img src="../../assets/common/node_img.png" alt="">
              </div>
            </div>
          </div>
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
      </swiper>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        direction: 'horizontal',
        slidesPerView: 2,
        // loop: true,
        // autoplay: {
        //   delay: 2000
        // },
        // disableOnInteraction: false,
        // 显示分页
        pagination: {
          el: '.swiper-pagination'
        }
      },
      nodeData: [
        {
          name: '区块数1',
          num: 3455
          // img: require('../../assets/common/1.png')

        },
        {
          name: '区块数2',
          num: 3453
          // img: require('../../assets/common/2.png')
        },
        {
          name: '区块数3',
          num: 3453
          // img: require('../../assets/common/3.png')
        },
        {
          name: '区块数4',
          num: 3453
          // img: require('../../assets/common/3.png')
        },
        {
          name: '区块数5',
          num: 3453
          // img: require('../../assets/common/3.png')
        },
        {
          name: '区块数6',
          num: 3453
          // img: require('../../assets/common/3.png')
        }
      ]

    }
  },

  computed: {
    swiper() {
      return this.$refs.pie_swiper.$swiper
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.nodeData = this.nodeData.map((item, index) => {
        console.log(index)
        return {
          ...item,
          img: require('../../assets/common/' + (index + 1) + '.png')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.node_container{
  width: 100%;
  height: 188px;
  background: url('../../assets/common/l_item_1.png') no-repeat;
  background-size: 100%;
    .title{
    padding: 18px 0 14px 34px;
  }
}

 .node_con{
    width:378px ;
    height: 135px;
    margin: 0 34px;
    overflow: hidden;
    .node_swiper_container{
      width: 100%;
      height: 100%;
      .slide_box{
        display: flex;
        .node_img{
          position: relative;
          z-index: 999;
          width: 77px;
          height: 77px;
          margin-right: 10px;
          overflow: hidden;
          &::before{
            content: "";
            position: absolute;
            width: 77px;
            height: 77px;
            top: 0;
            left: 0;
            z-index: -1;
            background:url('../../assets/common/node_circle.png') no-repeat;
            // border-radius: 50%;
            // -webkit-animation: circles 4s linear infinite;
            // -moz-animation: circles 4s linear infinite;
            // -o-animation: circles 4s linear infinite;
            // animation: circles 4s linear infinite;

          }
          img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

          }
        }
        .node_name{
          h5{
            color: #1FFCE5;
            font-size: 14px;
          }
          .num{
            color: #FFF000;
            font-size: 24px;
            font-weight: 700;
            margin: 4px 0;
          }
        }

      }

    }
}

@keyframes circles {
	0% {
	transform:rotate(0deg)
}
25% {
	transform:rotate(90deg)
}
50% {
	transform:rotate(180deg)
}
75% {
	transform:rotate(270deg)
}
100% {
	transform:rotate(360deg)
}
}
/deep/.swiper-pagination-bullet-active {
  background: #1FFCE5 !important;
}
/deep/.swiper-pagination-bullet {
    width: 10px;
    height: 3px;
    border-radius: 0%;
    display: inline-block;
    background: #092B43;
    opacity: 1;
}

</style>
